<script>
export default {
  data() {
    return {
      param: {
        content: {
          keyword: null
        }
      },
      tableList: {
        item: null,
        data:[],
        pageNo: 1,
        hasMore: false,
        hidden: false
      }
    }
  },
  mounted() {
    this.fetchData()
  },
  methods: {
    queryButtonClick: function () {
      this.fetchData()
    },
    fetchData: function () {
      this.$axios({url:'/ems/client/base/department/list',data: this.param}).then((content) => {
        const list = content.list;
        list.forEach(function (item) {
          if (item.nameInfo) {
            item.nameInfo = JSON.parse(item.nameInfo)
          }
          if (item.satelliteLocation) {
            item.satelliteLocation = JSON.parse(item.satelliteLocation)
          }else {
            item.satelliteLocation = {lng: '', lat: '', area: '', zoom: 18}
          }
        })
        this.tableList.data = list
      });
    },
    tableItemDetail: function (item) {
      this.tableList.hidden = true
      this.tableList.item = item
    }
  },
  components: {
    addDepartment: () => import("@/components/system-base/modules/addDepartment.vue")
  }
}
</script>

<template>
  <div>
    <div v-if="!tableList.hidden">
      <el-row>
        <el-col :span="24">
          <label>名称：</label><el-input v-model="param.content.keyword" placeholder="请输入内容" style="width: 200px"></el-input>
          &nbsp;
          <el-button type="primary" plain @click="queryButtonClick">查询</el-button>
          &nbsp;
          <el-button type="primary" plain @click="tableItemDetail()">添加科室</el-button>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24" style="margin-top: 20px;">
          <el-table
              :data="tableList.data"
              border
              style="width: 100%">
            <el-table-column align="center" prop="id"  label="ID" width="150"></el-table-column>
            <el-table-column  prop="buildingName"  label="所属建筑" width="150"></el-table-column>
            <el-table-column  label="简称" width="250">
              <template slot-scope="scope">
                {{scope.row.nameInfo.shortName['zh-CN']}}
              </template>
            </el-table-column>
            <el-table-column align="center"  prop="code"  label="科室编码" width="150"></el-table-column>
            <el-table-column  prop="logo"  label="图标">
              <template slot-scope="scope">
                <img :src="scope.row.logo" :alt="scope.row.nameInfo.shortName['zh-CN']" style="height: 30px;"/>
              </template>
            </el-table-column>
            <el-table-column  prop="address"  label="地址" width="250"></el-table-column>
            <el-table-column
                fixed="right"
                label="操作"
                width="100">
              <template slot-scope="scope">
                <el-button @click="tableItemDetail(scope.row)" type="text" size="small">查看</el-button>
                <el-button type="text" size="small">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-col>
      </el-row>
    </div>
    <div v-if="tableList.hidden">
      <addDepartment :tableList="tableList" :fetchTableData="fetchData"/>
    </div>
  </div>
</template>

<style>

</style>
